<template>
  <yd-ls-box>
    <yd-ls-layout title="药品详情" :onfoot=false :tolfurl="urls">

      <div class="yd-ls-height"></div>
      <yd-slider autoplay="3000">
        <yd-slider-item v-for="(items,index) in recommendDetail.files" :key="index">
          <img :src="items.pic_path">
        </yd-slider-item>
      </yd-slider>

      <div class="yd-ls-medicine-box">
        <div class="yd-medicine-title">
          <span>{{ recommendDetail.drug_name }} {{ recommendDetail.common_name }} {{ recommendDetail.standard }}</span>
          <span>{{ recommendDetail.producer }}</span>
          <span  v-if="false">￥{{ recommendDetail.price }}</span>
        </div>
        <div class="yd-ls-medicine-info" v-if="false">
          <ul>
            <li>处方药：{{ recommendDetail.ischufang ? "是" : "否" }}</li>
            <li>剂型：{{ recommendDetail.dosage_form }}</li>
            <li>贮藏：{{ recommendDetail.storage }}</li>
            <li>批准文号：{{ recommendDetail.auth_no }}</li>
          </ul>
        </div>
      </div>

      <div class="yd-ls-medicine-detail" v-if="false">
        <h3>适应症：</h3>
        <p>{{ recommendDetail.indication || "暂无数据" }}</p>
        <h3>成分：</h3>
        <p>{{ recommendDetail.chengfen || "暂无数据" }}</p>
        <h3>性状：</h3>
        <p>{{ recommendDetail.character || "暂无数据" }}</p>
        <h3>不良反应：</h3>
        <p>{{ recommendDetail.advers_reaction || "暂无数据" }}</p>
        <h3>注意事项：</h3>
        <p>{{ recommendDetail.attentions || "暂无数据" }}</p>
        <h3>禁忌：</h3>
        <p>{{ recommendDetail.fortbits || "暂无数据" }}</p>
        <h3>药物相互作用：</h3>
        <p>{{ recommendDetail.drug_interation || "暂无数据" }}</p>
        <h3>药理毒理：</h3>
        <p>{{ recommendDetail.drug_toxicology || "暂无数据" }}</p>
      </div>

      <!--返回顶部-->
      <yd-backtop></yd-backtop>

      <div class="yd-ls-height"></div>
    </yd-ls-layout>
    <yd-ls-button btnname="去购买" @handle-button="goshop()"></yd-ls-button>
  </yd-ls-box>
</template>

<style>
  .yd-ls-medicine-box {
    padding: 0 .24rem .5rem;
    background-color: #fff;
  }

  .yd-medicine-title {
    padding-top: .2rem
  }
  .yd-medicine-title span:nth-child(1) {
    font-weight: 600;
    font-size: 0.3rem;
    color: #222222;
  }
  .yd-medicine-title span:nth-child(2) {
    font-weight: 600;
    font-size: 0.28rem;
    color: #919191;
  }
  .yd-medicine-title span:nth-child(3) {
    font-weight: 600;
    font-size: 0.3rem;
    color: #FF0036;
    border-bottom: 1px solid #dfdfdf;
  }
  .yd-medicine-title span:nth-child(1),
  .yd-medicine-title span:nth-child(2),
  .yd-medicine-title span:nth-child(3) {
    display: block;
    padding-bottom: .15rem;
  }

  .yd-ls-medicine-info li {
    font-size: .28rem;
    padding-top: .15rem;
  }

  .yd-ls-medicine-detail {
    font-size: .28rem;
    margin-top: .15rem;
    padding: .3rem .24rem .5rem;
    background-color: #fff;
  }
  .yd-ls-medicine-detail p {
    padding: .2rem 0;
    color: #959595;
  }
</style>
<script>
  import ydLsBox from '../../../components/yd-ls-box.vue'
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsButton from '../../../components/yd-ls-button.vue'
  import api from '../../../axios/api'

  export default {
    name: 'medicine',
    data() {
      return {
        urls: 'index.html#/home',
        recommendDetail: {}
      }
    },
    created() {
      //TODO: 初始化数据
      this.getRecommendDetail()
    },
    methods: {
      init() {
      },
      getRecommendDetail() {
        let drug_id = this.$route.query.id
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.recommend_detail,{
          params: {
            drug_id: drug_id
          }
        }).then(m=>{
          let medi_data = m.data
          this.recommendDetail = medi_data.data
          this.$dialog.loading.close()
        }).catch(err=>{
          this.$dialog.loading.close()
          this.$dialog.alert({mes: JSON.stringify(err)})
        })
      },
      goshop() {
        window.location.href = `${api.shop_host}/TopMallWeb/mGoodsAction!goodsListing.action?openid=${localStorage.openId}&drugId=${this.$route.query.id}&start=0&limit=10&channelId=01&ramid=${new Date()}`
      }
    },
    mounted() {
      this.init()
    },
    components: { ydLsBox, ydLsLayout, ydLsButton }


  }
</script>
